<template>
  <p>{{ count }}</p>
  <button @click="add">add</button>
</template>
<script setup>
import { ref, onRenderTracked, onRenderTriggered } from "vue";
//onRenderTracked 当响应式依赖被访问并被跟踪时，这个钩子会被触发
//onRenderTriggered 当组件的渲染被一个响应式依赖的变化所触发时，这个钩子会被调用
onRenderTracked((event) => {
  //{effect: ReactiveEffect, target: RefImpl, type: 'get', key: 'value'}
  console.log(event);
});
onRenderTriggered((event) => {
  //{effect: ReactiveEffect, target: RefImpl, type: 'set', key: 'value', newValue: 1}
  console.log(event);
});
const count = ref(0);
const add = () => count.value++;
</script>
